<template>
  <div class="h-full w-full">
    <div
      id="maptarget"
      class="w-full h-full"
    ></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import mapJson from "./mapjson.json";
import { onBeforeUnmount, onMounted, watch } from "vue";
import type { GeoJSON } from "echarts/types/src/coord/geo/geoTypes.js";
import type { ECBasicOption } from "echarts/types/dist/shared";
import type { MapData } from "@/apis/homeApi";

const props = defineProps({
  data: {
    type: Object as () => MapData,
    require: true,
  },
});

//初始化ecahrts实例
let myChart: echarts.ECharts;
function resz() {
  myChart.resize();
}

onBeforeUnmount(() => {
  window.removeEventListener("resize", resz);
});

onMounted(() => {
  myChart = echarts.init(
    document.getElementById("maptarget") as HTMLDivElement
  );
  echarts.registerMap("ChengDe", mapJson as GeoJSON);
  renderChart();
  window.addEventListener("resize", resz);
});

//构建option配置对象
const renderChart = () => {
  const options = {
    //时间线
    timeline: {
      data: props.data!.timeData,
      axisType: "category",
      autoPlay: true,
      palyInterval: 3000,
      left: "10%",
      right: "10%",
      bottom: "0%",
      width: "80%",
      label: {
        color: "#ddd",
      },
      symbolSize: 10,
      lineStyle: {
        color: "#555",
      },
      checkpointStyle: {
        borderColor: "#888",
        borderWidth: 2,
      },
      controlStyle: {
        showNextBtn: true,
        showPrevBtn: true,
        color: "#666",
        borderColor: "#666",
      },
      emphasis: {
        color: "#fff",
        controlStyle: {
          color: "#aaa",
          borderColor: "aaa",
        },
      },
    },
    baseOption: {
      grid: {
        right: "2%",
        top: "15%",
        bottom: "10%",
        width: "20%",
      },
      //地图配置
      geo: {
        show: true,
        roam: true,
        zoom: 0.8,
        map: "ChengDe",
        center: [118.490238, 41.30561, 60],
        itemStyle: {
          areaColor: {
            type: "radial",
            x: 0.5,
            y: 0.5,
            r: 0.5,
            colorStops: [
              {
                offset: 0,
                color: "rgba(147,235,248,0)",
              },
              {
                offset: 1,
                color: "rgba(147,235,248,.2)",
              },
            ],
          },
          borderColor: "rgba(147,235,238,1)",
          borderWidth: 1,
        },
        //高亮状态下的配置
        emphasis: {
          itemStyle: {
            areaColor: "#389BB7",
            borderWidth: 0,
          },
        },
      },
    },
    options: [] as any,
  };

  props.data?.timeData.forEach((item) => {
    options.options.push({
      // backgroundColor:"#142037",
      title: [
        {
          text: "近半年处警数据统计",
          left: "0%",
          top: "0%",
          textStyle: {
            color: "#ccc",
            contSize: 30,
          },
        },
        {
          id: "statistic",
          text: item + "数据统计情况",
          right: "0%",
          top: "4%",
          textStyle: {
            color: "#ccc",
            fontSize: 20,
          },
        },
      ],
      xAxis: {
        type: "value",
        scale: true,
        position: "top",
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          margin: 2,
          color: "#aaa",
        },
      },
      yAxis: {
        type: "category",
        axisLine: {
          show: true,
          lineStyle: {
            color: "#ddd",
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          color: "#ddd",
        },
        data: props.data?.lineData
          .filter((m) => m.monthData === item)[0]
          .MapModelList.map((n) => n.name),
      },
      series: [
        {
          type: "bar",
          zlevel: 1.5,
          itemStyle: {
            color: "#5D98CE",
          },
          data: props.data?.lineData.filter((m) => m.monthData === item)[0]
            .MapModelList,
        },
        {
          type: "effectScatter",
          coordinateSystem: "geo",
          data: props.data?.starData.filter((m) => m.monthData === item)[0]
            .StarModelList,
          symbolSize: function (val: number[]) {
            return val[2] / 6;
          },
          showEffectON: "render",
          rippleEffect: {
            brushType: "stroke",
          },
          label: {
            formatter: "{b}",
            position: "right",
            show: true,
          },
        },
      ],
    });
  }),
    //3.通过实例填充图标
    myChart.setOption(options as ECBasicOption);
};
//检测来自父组件的数据变化更新图标
watch(
  () => props.data,
  () => {
    myChart.clear();
    renderChart();
  }
);
</script>

<style scoped></style>
